<template>
	<div class="theme">
		<van-nav-bar title="修改昵称" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="overlay nav-btm headTop">
			<div class="overlay-content scrolling">
				<div style="padding: 15px;padding-bottom: 10px;">
					<div style="font-size: 13px;color: rgb(125, 126, 128);">
						旧昵称
					</div>
				</div>
				<div class="update">
					<van-field :value="user.nickName ? user.nickName : '暂未设置'" readonly/>
				</div>
				<div style="padding: 15px;padding-bottom: 10px;">
					<div style="font-size: 13px;color: rgb(125, 126, 128);">
						新昵称
					</div>
				</div>
				<div class="update">
					<van-field v-model.trim="value" maxlength="20" />
				</div>
				<div style="padding: 30px 20px;" class="sure">
					<van-button color="#43add5" style="width: 100%;" @click="sure" :loading="loading">确定</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	export default {
		name: 'UpdateMine',
		components: {},
		props: {},
		data() {
			return {
				loading: false,
				user: []
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getUser() {
				base.getUser_info().then(res => {
					this.user = res.data;
				})
			},
			onClickLeft() {
				this.$router.push({
					path: '/Mine'
				});
			},
			sure() {
				if(!this.value) {
					this.$toast('新昵称不能为空');
					return false;
				}
				this.loading = true;
				this.axios.put(process.env.API_HOST + 'my/updateNickName?nickName=' + this.value).then(res => {
					if(res.data.code == 200) {
						this.$router.push({
							path: '/Mine'
						});
					}
					this.$toast(res.data.msg);
					this.loading = false;
				})
			}
		},
		created() {},
		mounted() {
			this.getUser();
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	/deep/ .van-nav-bar__text {
		color: white;
	}
	
	.update /deep/ .van-cell {
		padding: 15px;
		background-color: #f1f1f1;
	}
	
	.sure /deep/ .van-button {
		height: 40px;
		line-height: 38px;
		border-radius: 5px;
	}
</style>